<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 必须 准备一个具有宽高的盒子 -->
  <div style="width: 600px; height: 400px;"></div>

  <script src="./lib/echarts.min.js"></script>

  <script>
    // 1. 【固定语法】初始化echarts
    // let myChart = echarts.init(div盒子)
    let myChart = echarts.init(document.querySelector('div'))
    // 2. 配置图表（图表最终什么样子，取决于这个配置）
    let option = {
      title: {
        text: '我的折线图',
        left: 'center'
      },
      // 网格（指的是直角坐标系的大小、位置）
      grid: {
        top: 120, // 默认的单位是像素
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', 'Thu', 'Fri', 'Sat', 'Sun'],
        // x轴文字颜色配置
        axisLabel: {
          color: 'red'
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: 'pink'
          }
        }
      },
      // 系列数据。
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line', // line 表示折线图
          name: '销售额'
        },
        {
          data: [250, 130, 124, 118, 235, 247, 160],
          type: 'bar', // bar-柱状图；pie-饼图；map-地图
          name: '订单量'
        },
        {
          data: [190, 280, 264, 278, 175, 117, 210],
          type: 'bar',
          name: '赚的钱'
        }
      ],
      // 图例(需要series中的name的配合才行)
      legend: {
        top: 50
      },
      // color颜色配置
      // color: ['red', 'green', 'blue'], // 'red'  或者  ['red', 'green', 'blue']
      // color: ['red', '渐变色', '渐变色']
      color: ['red', {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: 'red' // 0% 处的颜色
        }, {
          offset: 1, color: 'blue' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }, {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'black' // 0% 处的颜色
          }, {
            offset: 1, color: '#fff' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }],
      // 提示框组件；鼠标移入的提示
      tooltip: {
        // 触发方式（什么时候提示，鼠标移入到具体的图形上提示，还是移入到范围内就提示）
        // trigger: 'item' // item表示鼠标移入到具体的图形上提示
        trigger: 'axis' // axis表示到轴线的范围内就提示
      }
    }
    // 3. 【固定语法】创建图表
    myChart.setOption(option) // setOption 第1个 O 是大写的
  </script>
</body>

</html>